<template>
  <div>
    <!-- 添加或修改参数配置对话框 -->
    <el-dialog class="dia-style" :title="title" :visible.sync="open" append-to-body>
      <HkForm
        ref="hkFormRef"
        :formLabels="formObj.formLabels"
        :rules="formObj.formRules"
        :data="form"
        :dict-list="formObj.dictList"
        :label-width="formObj.labelWidth"
        :btn-hidden="formObj.btnHidden">
      </HkForm>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="submitForm">保 存</el-button>
        <el-button @click="cancel">取 消</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import { addData, updateData } from '@/api/system/dict/data'
import HkForm from '@/components/HKForm/index.vue'
export default {
  components: { HkForm },
  props: {
    title: {
      type: String,
      default: '',
    },
    transForm: {
      type: Object,
      default: {},
    },
  },
  computed: {
    form: {
      get() {
        return this.transForm
      },
      set(val) {},
    },
  },
  data() {
    return {
      open: false,
      //  表单数据
      formObj: {
        btnHidden: true,
        labelWidth: '100',
        formLabels: [
          {
            label: '字典类型',
            field: 'dictType',
            type: 'input',
            disabled:true
          },
          {
            label: '字典标签',
            field: 'dictLabel',
            type: 'input',
          },
          {
            label: '数据键值',
            field: 'dictVal',
            type: 'input',
          },

          {
            label: '显示排序',
            field: 'dictSort',
            type: 'number',
            span: 24,
          },
          {
            label: '状态',
            field: 'status',
            type: 'radio',
            list: 'statusList',
            span: 24,
          },
          {
            label: '备注',
            field: 'remark',
            type: 'textarea',
            span: 24,
          },
        ],
        // 表单规则
        formRules: {
          dictType: [{ required: true, message: '请输入字典类型', trigger: 'blur' }],
          dictLabel: [{ required: true, message: '请输入字典标签', trigger: 'blur' }],
          dictVal: [{ required: true, message: '请输入数据键值', trigger: 'blur' }],

          dictSort: [{ required: true, message: '请选择显示排序', trigger: 'blur' }],
          status: [{ required: true, message: '请选择样式属性', trigger: 'blur' }],
        },
        // 列表准则
        dictList: {
          statusList: [
            {
              label: '正常',
              value: 0,
            },
            {
              label: '停用',
              value: 1,
            },
          ],
        },
      },
    }
  },
  methods: {
    /** 提交按钮 */
    async submitForm() {
      // console.log( this.$refs);
      let res = await this.$refs.hkFormRef.handleFormSubmit('formLabels')

      if (this.form.id != undefined) {
        updateData(Object.assign({}, res, { id: this.form.id })).then((response) => {
          this.$modal.msgSuccess('修改成功')
          this.open = false
          this.reset()
          this.$emit('submitForm')
        })
      } else {
        addData(res).then((response) => {
          this.$modal.msgSuccess('新增成功')
          this.open = false
          this.reset()
          this.$emit('submitForm')
        })
      }
    },
    // 取消按钮
    cancel() {
      this.open = false
      this.reset()
    },
    // 表单重置
    reset() {
      this.$refs.hkFormRef.resetForm('formLabels')
    },
  },
  mounted() {},
}
</script>

<style lang="scss" scoped></style>
